<script setup>
import { nextTick, ref } from "vue";
import { ElMessage } from "element-plus";

import 'vue3-markdown/dist/style.css'

//获取输入框内的内容
const message = ref("")

// 发送聊天消息
const send = () => {
    if (message.value.trim().length <= 0)
        return ElMessage.error("消息不能为空哦");

    disabled.value = true;
    list.value.push({
        left: false,
        message: message.value,
    });
    text.value.push({
        role: "user",
        content: message.value,
    });

    // 存储机器人回答的消息
    list.value.push({ left: true, message: '', tips: true })

    scrollToBottom();
    bigModel.value.start(message.value)
    message.value = ''
};
// 格式化时间
const formatCurrentTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, "0");
    const day = now.getDate().toString().padStart(2, "0");
    const hours = now.getHours().toString().padStart(2, "0");
    const minutes = now.getMinutes().toString().padStart(2, "0");
    const seconds = now.getSeconds().toString().padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

</script>
<template>
    <el-row>
        <el-card card class="chat-box" ref="box" style="margin-top: 5px;width: 100%;">
            <!-- <el-col :span="24"> -->
            <el-row style="height: 70vh;">
                <ul id="chat-message" class="list-unstyled py-4"
                    style="height: 100%;overflow-y: auto;width: 100%;overflow-x: hidden;">
                    <template v-for="(item, index) in list" :key="index">
                        <li v-if="!item.left" id="user-chat-question-1" :key="index"
                            class="d-flex message message-user right" style="width: 98%;">
                            <div class="message-body">
                                <el-row :gutter="5">
                                    <el-col :span="23">
                                        <!-- 时间 -->
                                        <span class="date-time text-muted">{{ formatCurrentTime() }}</span>
                                        <!-- 内容 -->
                                        <div class="message-row message-row-con">
                                            <div id="message-user-chat-question-1" class="message-content p-3 text-chat"
                                                style="max-width: 60%;word-wrap: break-word;padding-left: 15px;">
                                                {{ item.message }}
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="1">
                                        <div class="d-flex align-items-center justify-content-end">
                                            <!-- <div class="mx-10 p-2">
                  <a href="#" class="text-dark hover-primary font-weight-bold">HOPPIN</a>
                </div> -->
                                            <span class="msg-avatar">
                                                <img src="https://b0.bdstatic.com/337bc39b6880696d8c230d9e09232732.jpg@h_1280"
                                                    class="avatar avatar-lg rounded-circle" alt="用户" />
                                            </span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </li>


                        <li v-else id="user-chat-question-1" class="d-flex message message-user right left"
                            style="width: 98%;">
                            <!-- :style="{ display: item.message.length > 0 ? 'block' : 'none' }"> -->
                            <div class="message-body">
                                <el-row>
                                    <el-col :span="1.5">
                                        <div class="d-flex align-items-center justify-content-end">
                                            <!-- <div class="mx-10 p-2">
                  <a href="#" class="text-dark hover-primary font-weight-bold">讯飞星火</a>
                </div> -->
                                            <span class="msg-avatar">
                                                <img class="avatar avatar-lg rounded-circle"
                                                    style="height: 60px;padding: 5px;box-sizing: border-box;width: 60px;"
                                                    src="https://xinghuo.xfyun.cn/static/media/gpt-logo.e9ad4150a385435f5a90b50c44dad847.svg"
                                                    alt="讯飞星火" />
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="22">
                                        <!-- 时间 -->
                                        <span class="date-time text-muted">{{ formatCurrentTime() }}</span>
                                        <!-- 内容 -->
                                        <div class="message-row message-row-con">
                                            <div id="message-user-chat-question-1" class="message-content p-3 text-chat"
                                                style="border-radius: 0 10px 10px 10px;">
                                                <!-- <VueMarkdown :source="item.message"> </VueMarkdown> -->
                                                <!-- :style="{ visibility: item.tips ? 'visible' : 'hidden' }" -->
                                                <VMarkdownView :mode="mode" :content="item.message"></VMarkdownView>
                                                <p v-if="item.tips" @click="stopAnswer" class="answers">
                                                    停止回答
                                                </p>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </li>
                    </template>
                </ul>
            </el-row>
            <!-- </el-col> -->
        </el-card>

        <el-card class="chat-footer">
            <el-row>
                <el-col :span="24">
                    <div class="inp">
                        <textarea v-model="message" placeholder="请简述图片内容" col="120" rows="1" @keyup.enter="send"
                            style="resize:none;font-size: 18px;padding: 9px;width: 1000px;" />
                        <el-button icon="Promotion" class="button1" :disabled="disabled" @click="send"> {{ disabled ?
                            "回答中..." :
                            "发送" }}
                        </el-button>
                        <el-button class="button" :disabled="disabled">
                            <img src=""
                                alt="语音转文字" style="width: 20px;">
                            {{ disabled ? "" : "" }}
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>


<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.message.right {
    text-align: right;
}

.chat-content .message+.message {
    margin-top: 10px;
}

.message .avatar {
    width: 60px;
    border: 2px solid #21aa93;
    border-radius: 50% !important;
}

.text-muted {
    color: #95aac9;
}

.message.right .message-content {
    max-width: 60%;
    min-width: 10%;
    background-color: #f5f5f5;
    text-align: left;
    border-radius: 10px 0px 10px 10px;
}

.message .message-content {
    max-width: 60%;
    min-width: 10%;

    font-size: 16px;
    line-height: 1.6;
}

.right .message-row-con {
    display: flex;
    justify-content: flex-end;
}

.right .message-content {
    padding: 10px;
    margin-top: 5px;
}

//上层图片+讯飞回答部分
.d-flex {
    margin-top: 20px;
    // background: #21aa93;
    // width: 1580px;
}

.message.right.left {
    text-align: left;
}

.message.right.left .message-row {
    justify-content: flex-start;
}

.message.left .message-content[data-v-73c72fc6] {
    background-color: #f5f5f5;
    text-align: left;
    border-radius: 0 15px 15px 15px;
}

//最下方的输入框
.chat-footer {
    background-color: #ffffff !important;
    // padding: 0 20px;
    width: 1290px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: flex;
    // background-color: var(--body-color);
    // padding-top: 0.5rem !important;
    // border-top: 1px solid #dee2e6;
    margin: 20px;
    padding: 0 30px;
}

// ::v-deep .el-card__body {
//     flex: 1;
//   }

.inp {
    display: flex;
    width: 100%;
    // background-color: #95aac9;
}

.chat-footer textarea {
    flex: 15;
    border: #9c9c9c 1px solid;
    // border: none;
    outline: none;
    height: 40px;
    text-align: 40px;
}

.chat-footer .button1 {
    flex: 2;
    background-color: #21aa93;
    color: #fff;
    width: 90px;
    height: 40px;
    border: 0;
    outline: none;
    cursor: pointer;
    margin-left: 20px;
}

.chat-footer .button {
    flex: 1;
    width: 20px;
    height: 40px;
    border: 0;
    outline: none;
    cursor: pointer;
    margin-left: 20px;
}

.list-unstyled {
    margin-bottom: 50px;
}

.chat-box {
    margin: 20px;
}

.answers {
    transform: scale(0.9);
    font-size: 15px;
    background: #f5f5f5;
    width: 100%;
    margin: 10px 0 0 5px;
    text-align: right;
    // border-radius: 26px 0;
    cursor: pointer;
}


.markdown-body {
    padding: 8px;
}

.inputBoxPage .isrecording .voicingBtn .van-icon[data-v-97cbab18] {
    vertical-align: middle;
    width: 60px;
    height: 60px;
}

.van-icon {
    position: relative;
    display: inline-block;
    font: 14px / 1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
</style>
